<template>
  <!-- 父组件---->
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 导入上传 Excel 子组件  -->
        <upload-excel
          :on-success="handleSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入上传的组件
import UploadExcel from '@/components/UploadExcel/index.vue'

// 导入时间转换
import { formatExcelDate } from '@/utils'

// 导入 批量导入员工 接口API
import { importEmployeeAPI } from '@/api/employees'

export default {
  name: 'Excel',
  // 绑定上传组件
  components: { UploadExcel },
  methods: {
    // 数据 文字转英文
    // 将表格中的数据进行格式化
    transExcel(results) {
      // 枚举数据--字段-英文
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      // 遍历表格数据的数组---把中文字段拿出来
      return results.map(item => {
        const obj = {}

        // 将 item 每一项的 key 组成一个新数组
        const contentKeys = Object.keys(item)

        // 遍历这个中文字段数组-
        // contentKeys = [ '入职日期', '姓名', '工号','手机号', '转正日期',  '部门']
        contentKeys.forEach(key => {
        //   obj[userRelations[key]] = item[key]

          // 枚举数据的（英文）值--动态获取
          // key = '入职日期'--> timeOfEntry (找到 userRelations 数组里对应的 key 值)--英文
          const transKey = userRelations[key]

          // 如果格式化的是时间，需要进行转换---item[key] ->44142 --> 时间对象 标准格式 correctionTime: Sat Nov 07 2020 00:00:00 GMT+0800 (中国标准时间) {}
          if (transKey === 'timeOfEntry' || transKey === 'correctionTime') {
            obj[transKey] = new Date(formatExcelDate(item[key]))
          } else {
            obj[transKey] = item[key]
          }

          // obj['uesrname'] = item['姓名'] = "百里"
          //   obj[transKey] = item[key]
          // 键 （转换成功的英文） = 值（原来数据的值再放到新对象 值位置）
          // obj = { timeOfEntry ：44142 } ---
        })
        // 遍历完 返回obj
        return obj
      })
    },
    // 成功调用之后的函数，它会返回表格的表头和内容。
    async handleSuccess({ results, header }) {
      /* results = [{
        入职日期: 44142,
        姓名: "百里",
        工号: 777,
        手机号: "18222223322",
        转正日期: 44142,
        部门: "总裁办"
      }]
        */
      // 表头-header--->['姓名', '手机号', '入职日期', '转正日期', '工号', '部门']
      const arr = this.transExcel(results)

      console.log(arr)
      /* arr = [{
        correctionTime: 44142,
        departmentName: "总裁办",
        mobile: "18222223322",
        timeOfEntry: 44142,
        username: "百里",
        workNumber: 777,
      }] */
      //   console.log(results)
      //   console.log(header)

      // 批量导入员工--调接口-跳转路由-到员工管理页面-提示用户
      const res = await importEmployeeAPI(arr)
      this.$router.back()
      this.$message.success(res.message)
    }

  }
}
</script>
